<script setup lang="ts">
import { onMounted,ref } from 'vue'
import { useUserStore } from '@/store/user';
import { useTabStore } from '@/store/tab';
import { useMainStore } from '@/store/index'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { Edit, Delete, Close, Search, Refresh,Position,Download } from '@element-plus/icons-vue'
import { getGeojson as getGeojsonApi } from '@/api/tab';
import * as mars3d from "mars3d"
import locale from "element-plus/lib/locale/lang/zh-cn"

const userStore = useUserStore();
const tabStore = useTabStore();
const store = useMainStore()
const dialogFormVisible = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)

onMounted(() => {
})

/** 修改按钮操作 */
const handleUpdate = async (row) => {
  dialogFormVisible.value = true
  tabStore.getPostgresInfo(row.gid)
}

/** 定位按钮操作 */
const handleFlyTo = async (row) => {
  getGeojsonApi(row.gid).then(res => {
    store.activeBtn=0
    window.PolyhonLayer.clear()
    let PolyhonEntity = new mars3d.graphic.PolygonEntity({
      positions:JSON.parse(res.msg).coordinates[0][0],
      style:{
        fill:false,
        color:'#1d9bf0',
        outline:true,
        outlineWidth:3,
        outlineColor:'#ff0000',
        label:{
          text:'承包人:' + row.contractorName,
          color:'#ff0000',
        },
      },
      flyTo:true,
      flyToOptions:{
        duration:2
      }
    })
    PolyhonEntity.addTo(window.PolyhonLayer)
  })
}

// 删除地块
const handleDelete = (row) => {
  dialogVisible.value = true
  tabStore.detGid = row.gid
}

// 修改地块行政区
const changeEditXZQ = (node) => {
  if(node.length==2) {
    tabStore.townArr.map(res => {
      if(res.name == node[0]) {
        res.villageVoList.map(ele => {
          ele.name == node[1]?tabStore.form.villageNameId=ele.id:''
        })
      }
    })
    tabStore.form.townName = node[0]
    tabStore.form.villageName = node[1]
  }
}
</script>

<template>
  <div class="TabbarBtn">
    <div id="third-element-introduction">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="详细表单"
        placement="left"
      >
      <div :class="store.activeBtn==4?'iconBox show':'iconBox'" @click="store.activeBtn==4?store.activeBtn=0:store.activeBtn=4">
        <img src="@/assets/image/grid.png" alt="">
      </div>
      </el-tooltip>
    </div>
  </div>
  <div :class="store.activeBtn==4? 'leftTabBox show':'leftTabBox'">
    <div class="closebtn" @click="store.activeBtn = 0"><el-icon><Close /></el-icon></div>
    <div id="mbtabsearch">
      <el-form :model="tabStore.queryParams" ref="queryFormRef" :inline="true">
        <el-form-item label="流转年份">
          <el-date-picker
            @clear="tabStore.searchPostgresInfo"
            v-model="tabStore.queryParams.circulationTime"
            type="year"
            placeholder="请选择年份"
            style="width: 130px"
            value-format="YYYY"
            clearable
            @change="tabStore.searchPostgresInfo"
          />
        </el-form-item>
        <el-form-item label="行政区" prop="outOrderNumber">
          <el-cascader v-model="tabStore.townValue" :options="tabStore.townArr" :props="tabStore.props1" clearable placeholder="请选择村镇" @change="tabStore.changeXZQ"></el-cascader>
        </el-form-item>
        <el-form-item label="农场名称" prop="outOrderNumber">
          <el-input
            @clear="tabStore.searchPostgresInfo"
            v-model="tabStore.queryParams.farmName"
            placeholder="请输入农场名称"
            clearable
            style="width: 130px"
            @keyup.enter="tabStore.searchPostgresInfo"
          />
        </el-form-item>
        <el-form-item label="承包人" prop="contractorName">
          <el-input
            @clear="tabStore.searchPostgresInfo"
            v-model="tabStore.queryParams.contractorName"
            placeholder="请输入承包人名称"
            clearable
            style="width: 150px"
            @keyup.enter="tabStore.searchPostgresInfo"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="tabStore.searchPostgresInfo">搜索</el-button>
          <el-button type="success" :icon="Download" @click="tabStore.getExport">导出</el-button>
          <el-button :icon="Refresh" @click="tabStore.resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item>总面积：{{ tabStore.totalArea }}㎡/{{ (tabStore.totalArea/666.67).toFixed(2) }}亩</el-form-item>
        <el-form-item><el-switch
          v-model="tabStore.queryParams.isFarm"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #409eff; --el-switch-off-color: #13ce66"
          active-text="家庭农场"
          inactive-text="全部"
          :disabled="tabStore.isLayerLoading"
          @change="tabStore.searchPostgresInfo"
          active-value="0"
          inactive-value="1"
        /></el-form-item>
      </el-form>
    </div>

    <el-table
        class="form-data-table"
        ref="tableDataRef"
        :data="tabStore.tabData"
        :max-height="tabStore.mobtabelHeight"
        border>
      <el-table-column prop="townName" label="镇名" align="center"> </el-table-column>
      <el-table-column prop="villageName" label="村名" align="center"> </el-table-column>
      <el-table-column prop="farmName" label="农场名称" align="center"> </el-table-column>
      <el-table-column prop="contractorName" label="承包人" align="center"> </el-table-column>
      <el-table-column prop="annualRent" label="年租金" align="center"> </el-table-column>
      <el-table-column prop="circulationTime" label="流转时间" align="center"> </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"> </el-table-column>
      <el-table-column prop="area" label="面积" align="center">
        <template #default="scope">
          <div v-if="scope.row.area">
            <div>{{ scope.row.area }} ㎡</div>
            <div>{{ (scope.row.area/666.67).toFixed(2) }}亩</div>
          </div>
          <div v-else>
            <div>{{ (scope.row.shapeArea*10000000000).toFixed(2) }} ㎡</div>
            <div>{{ (scope.row.shapeArea*10000000000/666.67).toFixed(2) }}亩</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="110">
        <template #default="scope">
          <el-tooltip v-if="userStore.roles.includes('superadmin')||userStore.roles.includes('farmAdmin')" content="修改" placement="top">
            <el-button link type="primary" :icon="Edit" @click="handleUpdate(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="定位" placement="top">
            <el-button link type="success" :icon="Position" @click="handleFlyTo(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip v-if="userStore.roles.includes('superadmin')||userStore.roles.includes('farmAdmin')" content="删除" placement="top">
            <el-button link type="danger" :icon="Delete" @click="handleDelete(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationBox" v-show="store.activeBtn==4? true:false">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="tabStore.queryParams.pageNum"
          v-model:page-size="tabStore.queryParams.pageSize"
          :page-sizes="[5, 10, 15]"
          layout="prev, pager, next"
          :total="tabStore.total"
          @size-change="tabStore.getPostgres"
          @current-change="tabStore.getPostgres"
        />
      </el-config-provider>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" title="修改土地信息" width="500">
    <el-form :model="tabStore.form">
      <el-form-item label="行政区" prop="outOrderNumber">
        <el-cascader v-model="tabStore.townEditValue" :options="tabStore.townArr" :check-strictly="true" :props="props1" clearable placeholder="请选择村镇" @change="changeEditXZQ"></el-cascader>
      </el-form-item>
      <el-form-item label="是否是农场" prop="isFarm">
        <el-switch v-model="tabStore.form.isFarm" active-value="0" inactive-value="1" />
      </el-form-item>
      <el-form-item label="农场名称" v-show="tabStore.form.isFarm=='0'" prop="farmName">
        <el-input v-model="tabStore.form.farmName" autocomplete="off">
          <template #append>家庭农场</template>
        </el-input>
      </el-form-item>
      <el-form-item label="承包人">
        <el-input v-model="tabStore.form.contractorName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年租金">
        <el-input v-model="tabStore.form.annualRent" autocomplete="off" />
      </el-form-item>
      <el-form-item label="流转时间">
        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="tabStore.form.circulationTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择流转时间"
          />
        </el-config-provider>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="tabStore.form.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="面积">
        <el-input type="number" v-model="tabStore.form.area" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="[tabStore.putPostgresInfo(),dialogFormVisible = false]">提交</el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
  >
    <span>是否确认删除该条记录？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="[dialogVisible = false,tabStore.detGid='']">取消</el-button>
        <el-button type="primary" @click="[dialogVisible = false,tabStore.detPostgresInfo()]">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.leftTabBox {
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-sizing: border-box;
  padding: 15px 15px 0;
}
.leftTabBox.show{
  bottom: 0;
}

.leftTabBox .paginationBox {
  position: absolute;
  bottom: 20px;
  left: -50vw;
  display: flex;
  text-align: center;
}

.leftTabBox.show .paginationBox {
  left: 50%;
  transform: translateX(-50%)
}
.closebtn {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  z-index: 99999;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
</style>
